<template>
  <div class="echart" id="pieChart" :style="pieChartStyle"></div>
</template>
  
  <script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      pieChart: {},
      pieData: [
        { value: 40, name: "开发部" },
        { value: 38, name: "测试部" },
        { value: 32, name: "运营部" },
        { value: 30, name: "人事部" },
        { value: 28, name: "策划部" },
        { value: 26, name: "财务部" },
        { value: 22, name: "销售部" },
        { value: 18, name: "解忧杂货部" },
      ],
      pieName: [],
      pieChartStyle: { float: "left", width: "100%", height: "500px" }, //图表样式
    };
  },
  mounted() {
    this.initDate(); //数据初始化
    this.initPieEcharts();
  },
  methods: {
    initDate() {
      for (let i = 0; i < this.pieData.length; i++) {
        this.pieName[i] = this.pieData[i].name;
      }
    },
    initPieEcharts() {
      // 饼图
      const option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          // 图例
          data: this.pieName,
          right: "10%",
          top: "bottom",
          orient: "vertical",
        },
        title: {
          // 设置饼图标题，位置设为顶部居中
          text: "部门人数统计图示",
          top: "0%",
          left: "center",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            roseType: "area",
            top: "20%",
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 8,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              fontSize: "40",
              formatter: "{b} : {c} ({d}%)", // b代表名称，c代表对应值，d代表百分比
            },
            labelLine: {
              show: false,
            },
            radius: [50, 250],
            center: ["50%", "50%"], //饼图半径
            data: this.pieData,
          },
        ],
      };
      const optionFree = {
        xAxis: {},
        yAxis: {},
        series: [
          {
            data: this.seriesData,
            type: "line",
            smooth: true,
          },
        ],
      };
      this.pieChart = echarts.init(document.getElementById("pieChart"));
      this.pieChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.pieChart.resize();
      });
    },
  },
};
</script>
  